<template>
  <!-- 整体容器 -->
  <div class="admin-container">
    <!-- 左侧固定侧边栏 -->
    <div class="admin-sidebar">
      <div class="sidebar-header">
        <h2 class="sidebar-title">医疗管理系统</h2>
      </div>
      
      <!-- 用户信息区域 -->
      <div class="user-info">
        <el-avatar 
          size="large" 
          icon="el-icon-user" 
          style="margin: 20px auto; display: block;"
        ></el-avatar>
        <p class="user-name">{{ formattedDoctorName }}</p>
        <p class="user-role">管理员</p>
      </div>

      <!-- 侧边栏菜单 -->
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        background-color="#1a202c"
        text-color="#e2e8f0"
        active-text-color="#4299e1"
        @select="handleMenuSelect"
      >
        <!-- 医生首页 -->
        <el-menu-item index="/guanliyuan/paibanyulan">
          <i class="el-icon-house"></i>
          <span>排班预览</span>
        </el-menu-item>

        <!-- 功能菜单 -->
        <el-menu-item index="/guanliyuan/keshiguanli">
          <i class="el-icon-s-office-building"></i>
          <span>科室管理</span>
        </el-menu-item>
        <el-menu-item index="/guanliyuan/paibanguanli">
          <i class="el-icon-schedule"></i>
          <span>排班管理</span>
        </el-menu-item>
        <el-menu-item index="/guanliyuan/yonghuguanli">
          <i class="el-icon-user-solid"></i>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/guanliyuan/yishenguanli">
          <i class="el-icon-user-solid"></i>
          <span>医生管理</span>
        </el-menu-item>
        <el-menu-item index="/guanliyuan/gonggaoguanli">
          <i class="el-icon-user-solid"></i>
          <span>公告管理</span>
        </el-menu-item>
        <el-menu-item index="/guanliyuan/lunbotuguanli">
          <i class="el-icon-user-solid"></i>
          <span>轮播图管理</span>
        </el-menu-item>
        <el-menu-item index="/guanliyuan/gerenzhongxin">
          <i class="el-icon-user-solid"></i>
          <span>个人中心</span>
        </el-menu-item>

        <!-- 退出登录 -->
        <el-menu-item index="logout">
          <i class="el-icon-switch-button"></i>
          <span>退出登录</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 右侧内容容器 -->
    <div class="admin-main">
      <!-- 顶部工具栏 -->
      <div class="admin-header">
        <div class="header-title">
          <h1>管理员工作站</h1>
          <p class="sub-title">高效·精准·智能</p>
        </div>
        <div class="header-actions">
          <el-date-picker
            v-model="currentDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 180px; margin-right: 20px;"
          ></el-date-picker>
          <button class="action-btn">
            <i class="el-icon-bell"></i>
            <span>消息</span>
            <span class="notification-badge">3</span>
          </button>
          <div class="user-profile">
            <el-avatar 
              size="small" 
              icon="el-icon-user" 
              style="margin-right: 8px;"
            ></el-avatar>
            <span class="user-name">{{ formattedDoctorName }}</span>
          </div>
        </div>
      </div>

      <!-- 动态内容区域 -->
      <div class="admin-content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user' 
import { ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router' 

const userStore = useUserStore()
const router = useRouter() 
const route = useRoute()
const currentDate = ref(new Date())
const activeMenu = ref('') // 控制菜单选中状态

// 处理医生姓名（示例：李宁宁 → 李医生）
const formattedDoctorName = computed(() => {
  const realName = userStore.userInfo?.realName || '管理员'
  return realName.charAt(0) + '管理员' 
})

// 初始化默认选中菜单
onMounted(() => {
  activeMenu.value = route.path // 根据当前路由设置选中菜单
})

// 菜单点击事件
const handleMenuSelect = (index) => {
  if (index === 'logout') {
    // 退出登录逻辑
    logout()
  } else {
    // 路由跳转
    router.push(index)
    activeMenu.value = index // 更新选中状态
  }
}

// 退出登录逻辑
const logout = () => {
  ElMessageBox.confirm(
    '确定要退出登录吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    userStore.clearUserInfo() // 清除用户信息（需在 Pinia 中实现）
    router.push('/home')      // 返回主页
  }).catch(() => {
    // 取消操作
  })
}
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

body {
  margin: 0;
  overflow-x: hidden;
  background-color: #f5f7fa;
}

/* 整体容器 */
.admin-container {
  display: flex;
  min-height: 100vh;
}

/* 侧边栏样式 */
.admin-sidebar {
  width: 240px;
  background-color: #1a202c;
  color: #e2e8f0;
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  transition: width 0.3s ease;
  z-index: 100;
}

.sidebar-header {
  padding: 24px 0;
  text-align: center;
  border-bottom: 1px solid #2d3748;
}

.sidebar-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

/* 用户信息区域 */
.user-info {
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #2d3748;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 10px 0 5px;
}

.user-role {
  font-size: 12px;
  color: #a0aec0;
}

/* 菜单样式 */
.el-menu {
  border-right: none;
}

.el-menu-item {
  height: 48px;
  line-height: 48px;
  margin: 4px 0;
}

.el-menu-item i {
  color: inherit;
  margin-right: 12px;
}

.el-menu-item.is-active {
  background-color: #2d3748 !important;
  color: #4299e1 !important;
  font-weight: 500;
}

.el-menu-item:hover {
  background-color: #2d3748 !important;
}

/* 主内容区域 */
.admin-main {
  flex: 1;
  margin-left: 240px;
  transition: margin 0.3s ease;
}

/* 顶部工具栏 */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 0 24px;
  height: 64px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 90;
}

.header-title h1 {
  font-size: 20px;
  font-weight: 600;
  color: #1a202c;
}

.header-title .sub-title {
  font-size: 12px;
  color: #718096;
  margin-top: 2px;
}

.header-actions {
  display: flex;
  align-items: center;
}

.action-btn {
  background: none;
  border: none;
  color: #4a5568;
  cursor: pointer;
  padding: 8px 12px;
  position: relative;
  margin-left: 16px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.action-btn i {
  font-size: 18px;
  margin-right: 6px;
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: #ed8936;
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.user-profile {
  display: flex;
  align-items: center;
  margin-left: 16px;
}

.user-name {
  font-size: 14px;
  color: #1a202c;
  font-weight: 500;
}

/* 内容区域 */
.admin-content {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 64px);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .admin-sidebar {
    width: 64px;
  }
  
  .sidebar-title, .user-info .user-name, .user-info .user-role {
    display: none;
  }
  
  .el-menu-item span {
    display: none;
  }
  
  .admin-main {
    margin-left: 64px;
  }
}

@media (max-width: 768px) {
  .admin-header {
    flex-direction: column;
    height: auto;
    padding: 12px;
  }
  
  .header-title {
    margin-bottom: 12px;
    text-align: center;
  }
  
  .header-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 576px) {
  .admin-sidebar {
    display: none;
  }
  
  .admin-main {
    margin-left: 0;
  }
}
</style>